<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图</title>
</head>

<body>
    <div class="bar" style="width: 1000px;height: 500px;">
        <!-- 柱状图 -->
        <div id="handlerView" style="width: 100%;height: 100%;"></div>
    </div>

    <script src="./base_js/echarts.min.js"></script>
    <script>
        const handlerViewDom = document.getElementById('handlerView')
        let handlerChart = echarts.init(handlerViewDom)
        // x轴数据
        let xData = ['苏州', '无锡', '南通', '常州', '徐州', '扬州', '南京', '宿迁', '连云港', '盐城', '淮安', '镇江', '泰州']
        // y轴数据
        let yData = [28, 32, 12, 36, 35, 37, 29, 33, 21, 23, 34, 20, 27]
        // 最大值，用于设置背景柱体高度
        let maxData = []
        let temp = yData.sort((a, b) => {
            return a - b
        })
        yData.forEach(item => {
            maxData.push(temp[temp.length - 1])
        })
        let handlerOption = {
            xAxis: {
                type: 'category', // 类型
                data: xData, // x轴数据
                axisLine: { // x坐标轴轴样式展示
                    show: true, // 是否显示坐标轴x轴线。
                    onZero: true, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
                    symbol: 'none', // 轴线两边的箭头。可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']
                    lineStyle: { // x轴的样式，一个对象，属性有：{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                        color: '#B6BABD'
                    }
                },
                axisTick: { // 是否显示坐标轴刻度
                    show: false
                }
            },
            yAxis: {
                name: '单位(时)', // 坐标轴名称
                axisLabel: { // 坐标轴刻度标签的相关设置
                    color: '#999999', // 颜色
                    fontSize: 14, // 字体
                },
                splitLine: { // 坐标轴在 grid 区域中的分隔线
                    show: true, // 是否显示分隔线。
                    lineStyle: { // 分隔线的样式——属性有：{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                        color: '#D9DFE2', // 颜色
                        type: 'dashed', // 类别 'solid' 、 'dashed' 、 'dotted'
                    },
                },
            },
            //图表与容器的位置关系
            grid: {
                left: '5%',   // 与容器左侧的距离
                right: '3%', // 与容器右侧的距离
                top: '19%',   // 与容器顶部的距离
                bottom: '15%', // 与容器底部的距离
            },
            tooltip: { // 提示框组件
                /*
                    item: 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                    axis: 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                    none: 什么都不触发
                */
                trigger: 'axis', // 触发类型
                showDelay: 0, // 延时展示时间
                axisPointer: { // 坐标轴指示器配置项 —— 具体可以自行尝试
                    /*
                        line：直线指示器
                        shadow：阴影指示器
                        none：无指示器
                        cross：十字准星指示器
                    */
                    type: 'line', // 指示器类型
                    lineStyle: { // 设置指示器样式
                        color: { // 设置渐变色
                            type: 'line',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [{ // 0-1的渐变，可以自行尝试
                                offset: 0, color: 'rgba(82, 141, 251, 0.2)'
                            }, {
                                offset: 1, color: 'rgba(82, 141, 251, 0)'
                            }],
                        },
                        type: 'solid', // 设置实现
                        width: 40 // 线的宽度
                    },
                }
            },
            dataZoom: [{  // 缩放
                show: false, // 是否展示
                type: 'slider', // 滑动条型数据区域缩放组件提供了数据缩略图显示
                startValue: 0, // 开始索引
                endValue: 6 // 结束索引
            }, {
                /*
                    平移：在坐标系中滑动拖拽进行数据区域平移。
                    缩放：
                        PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同）
                        移动端：在移动端触屏上，支持两指滑动缩放。
                */
                type: 'inside'
            }],
            series: [
                {
                    name: '平均统计时间', // 系列名称
                    type: 'bar', // 类别
                    barWidth: 16, // 柱条的宽度，不设时自适应
                    label: {  // 图形上的文本标签，可用于说明图形的一些数据信息
                        show: true, // 是否显示标签。
                        position: 'top', // 显示位置
                        color: '#666666', // 颜色
                        zlevel: 4 // 用于分层使用
                    },
                    itemStyle: { // 图形样式
                        normal: { // 自定义渐变颜色
                            color: (params) => ({
                                type: 'linear',
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#5A93FC',
                                    },
                                    {
                                        offset: 1,
                                        color: '#97C5FF',
                                    },
                                ]
                            })
                        }
                    },
                    data: yData, // data数据
                }
            ]
        };
        // 该函数为绑定了个点击事件
        const zoomSize = 7;
        handlerChart.on('click', function (params) {
            // 通过计算获取周围的值
            handlerChart.dispatchAction({
                type: 'dataZoom',
                startValue: xData[Math.max(params.dataIndex - zoomSize / 2, 0)],
                endValue:
                    xData[Math.min(params.dataIndex + zoomSize / 2, yData.length - 1)]
            });
        });
        // 渲染echarts图标
        handlerOption && handlerChart.setOption(handlerOption)
        // 监听窗口发生变化，重新渲染页面
        handlerChart.resize()
        window.addEventListener('resize', () => {
            handlerChart.resize()
        })
    </script>
</body>

</html>